<template>
  <div>
    <div class="share-page">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/role-list' }"
          >角色列表</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/role-add' }"
          >新增角色</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="monitoring-content">
      <div class="title">新增角色</div>
      <div class="common-box">
        <div class="box-title">基础资料</div>
        <div class="box-content">
          <el-form
            ref="ruleFormRef"
            :rules="rules"
            :inline="true"
            :model="formInline"
            style="width: 100%"
          >
            <div class="search-item">
              <el-form-item label="登录账号:" prop="count">
                <el-input
                  v-model="formInline.count"
                  placeholder="请输入登录账号"
                >
                </el-input>
                <div class="info info1">登录账号必须是手机号/邮箱</div>
              </el-form-item>
              <el-form-item label="登录密码:" prop="password">
                <el-input
                  v-model="formInline.password"
                  placeholder="请输入登录密码"
                >
                </el-input>
                <div class="info info1">登录密码必须字母+数字的8位数</div>
              </el-form-item>
              <el-form-item label="姓名：" prop="name">
                <el-input v-model="formInline.name" placeholder="请输入姓名">
                </el-input>
                <div class="info info1">
                  请输入账号持有者姓名，方便后续查看和管理
                </div>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>

      <div class="common-box">
        <div class="box-title">账号类型和配置</div>
        <div class="box-content">
          <div class="box-sb mb-50">
            <el-form-item label="账号类型:">
              <div class="date-tabs">
                <div
                  v-for="item in dateList"
                  :key="item.index"
                  :class="
                    formInline.countType === item.index ? 'activity-item' : ''
                  "
                  class="tabs-item"
                  @click="dateTabs(item)"
                >
                  {{ item.name }}
                </div>
              </div>
            </el-form-item>
            <el-button
              class="mx-10"
              round
              color="#0071bb"
              :icon="Plus"
              @click="switchFuc"
              >添加关联设备</el-button
            >
            <div class="info">
              1、系统会根据此账号类型来赋予一些默认角色和判断一些业务逻辑<br />
              2、不同的账号需要不同的配置项；例如补货账号需要设置每日缺货通知时间，合作伙伴需要设置可以查看设备的数据和分成比例
            </div>
          </div>
          <div v-if="!isTable" class="box-sb mb-50">
            <el-form-item label="缺货通知时间:">
              <el-time-select
                v-model="formInline.detailTime"
                style="width: 240px"
                start="08:30"
                step="00:15"
                end="18:30"
                placeholder="Select time"
              />
            </el-form-item>

            <div class="info">
              提示:每天固定此时间汇总缺货设备,并发送消息通知
            </div>
          </div>
          <div v-if="isTable" class="box-sb mb-50">
            <div class="content-box">
              <div class="right">
                <div class="choice-list">
                  <div>
                    <span>关联</span>
                    <span style="color: #1010ff">零售柜</span>：
                    <span class="info-msg">以下设备有权查看数据</span>
                  </div>
                  <el-button
                    round
                    color="#0071bb"
                    :icon="Plus"
                    @click="showRenew = true"
                    >选择设备</el-button
                  >
                </div>
                <div class="tables-box b-1">
                  <el-table height="30vh" :data="tableData" style="width: 100%">
                    <el-table-column prop="name" label="设备名称" />
                    <el-table-column prop="role" label="设备编号" />
                    <el-table-column prop="bMoney" label="分成类型" />
                    <el-table-column prop="xMoney" label="显示分成比例" />
                    <el-table-column prop="check" label="操作">
                      <template #default>
                        <el-button size="small" type="danger">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
              <div class="left">
                <div class="choice-list">
                  <div>
                    <span>关联</span>
                    <span style="color: #1010ff">零售柜</span>：<span
                      class="info-msg"
                      >以下设备有权查看数据</span
                    >
                    >
                  </div>
                  <el-button
                    round
                    color="#0071bb"
                    :icon="Plus"
                    @click="showRenew = true"
                    >选择设备</el-button
                  >
                </div>
                <div class="tables-box">
                  <el-table height="30vh" :data="tableData" style="width: 100%">
                    <el-table-column prop="name" label="设备名称" />
                    <el-table-column prop="role" label="设备编号" />
                    <el-table-column prop="bMoney" label="分成类型" />
                    <el-table-column prop="xMoney" label="显示分成比例" />
                    <el-table-column prop="check" label="操作">
                      <template #default>
                        <el-button size="small" type="danger">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="common-box">
        <div class="box-title">账号角色权限</div>
        <div class="box-content">
          <el-form
            ref="ruleFormRef1"
            :rules="rules2"
            :inline="true"
            :model="formInline"
            style="width: 100%"
          >
            <div class="box-sb mb-50">
              <el-form-item label="角色权限:" prop="permission">
                <el-select
                  v-model="formInline.permission"
                  multiple
                  placeholder="Select"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>

              <div class="info">
                1、此处可多选<br />
                2、该账户拥有的权限为：所有选择角色的允许权限之和减去所有选择角色的禁止权限之和<br />
                3、若想去除系统默认角色中的某些权限，需要创建一个新的角色，在禁止权限列表中勾选<br />
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    <div class="flex-c">
      <el-button round color="#0071bb">保存</el-button>
      <el-button round>取消</el-button>
    </div>
    <!-- 续费 -->
    <SelDevice
      v-if="showRenew"
      @close="onClose()"
      @submit="onSubmit()"
    ></SelDevice>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";

import { Plus } from "@element-plus/icons-vue";
interface tabsList {
  name: string;
  index: string;
}
const showRenew = ref(false);
const onClose = () => {
  showRenew.value = false;
};
const onSubmit = () => {
  showRenew.value = false;
};
//
const dateList = ref([
  {
    name: "超级管理员",
    index: "5",
  },
  {
    name: "补货员",
    index: "4",
  },
  {
    name: "维修员",
    index: "3",
  },
  {
    name: "点位推荐员",
    index: "2",
  },
  {
    name: "自定义",
    index: "1",
  },
]);
const isTable = ref(false);
const dateTabs = (tabItem: tabsList) => {
  formInline.value.countType = tabItem.index;
};
const switchFuc = () => {
  isTable.value = !isTable.value;
};
const tableData = [
  {
    id: "1",
    name: "小张",
    role: "超级管理员",
    bMoney: "12.00",
    xMoney: "1.00",
    AMoney: "14.00",
  },
  {
    id: "2",
    name: "小张",
    role: "超级管理员",
    bMoney: "12.00",
    xMoney: "1.00",
    AMoney: "14.00",
  },
  {
    id: "3",
    name: "小张",
    role: "超级管理员",
    bMoney: "12.00",
    xMoney: "1.00",
    AMoney: "14.00",
  },
  {
    id: "4",
    name: "小张",
    role: "超级管理员",
    bMoney: "12.00",
    xMoney: "1.00",
    AMoney: "14.00",
  },
  ,
  {
    id: "2",
    name: "小张",
    role: "超级管理员",
    bMoney: "12.00",
    xMoney: "1.00",
    AMoney: "14.00",
  },
  {
    id: "3",
    name: "小张",
    role: "超级管理员",
    bMoney: "12.00",
    xMoney: "1.00",
    AMoney: "14.00",
  },
  {
    id: "4",
    name: "小张",
    role: "超级管理员",
    bMoney: "12.00",
    xMoney: "1.00",
    AMoney: "14.00",
  },
];
const options = ref([
  {
    label: "权限1",
    value: "1",
  },
  {
    label: "权限2",
    value: "2",
  },
]);
const formInline = ref({
  count: "",
  password: "",
  name: "",
  countType: "5",
  detailTime: "",
  permission: "",
});
const rules = reactive({
  password: [
    {
      required: true,
      message: "",
      trigger: "blur",
    },
  ],
  count: [
    {
      required: true,
      message: "",
      trigger: "blur",
    },
  ],
  name: [
    {
      required: true,
      message: "",
      trigger: "blur",
    },
  ],
});
const rules2 = reactive({
  permission: [
    {
      required: true,
      message: "",
      trigger: "blur",
    },
  ],
});
</script>
<style lang="scss" scoped>
:deep() {
  .el-button--danger {
    background: rgb(255, 0, 0);
  }
  .el-form-item.is-required:not(.is-no-asterisk).asterisk-left
    > .el-form-item__label:before {
    color: #4d4d4d !important;
  }
  .el-form-item__error {
    color: #989898 !important;
  }
  .el-form-item {
    width: 100% !important;
  }
  .box-sb {
    .el-form-item {
      width: 33.3% !important;
      .el-select {
        width: 100% !important;
      }
    }
  }
}

.monitoring-content {
  background: #fff;
  padding: 10px 10px 0px 10px;
  .title {
    color: #4d4d4d;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .common-box {
    color: #4d4d4d;
    width: 100%;
    border: 1px solid #ccc;
    font-size: 12px !important;
    margin-bottom: 10px;
    th {
      background: #00ffff !important;
      color: #4d4d4d !important;
    }

    .box-title {
      background: #00ffff;
      padding: 10px;
    }
    .box-content {
      padding: 10px;
      .date-tabs {
        text-align: center;
        display: flex;
        font-size: 12px;

        .tabs-item {
          width: 100px;
          background-color: #fff;
          border: 1px solid #d2d2d2;
          border-radius: 20px;
          margin-right: 15px;
        }

        .activity-item {
          background-color: #0071bb;
          border: 1px solid #0071bb;
          color: #fff;
        }

        .tabs-item:hover {
          cursor: pointer;
        }
      }
    }
  }
}
.content-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .right {
    width: 50%;
  }
  .left {
    width: 50%;
    padding: 0px 10px;
  }
  .tables-box {
    height: 30vh;
    // padding: 0px 10px;
  }
  .b-1 {
    border: 1px solid #ccc;
  }
}
.choice-list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  .info-msg {
    font-family: Source Han Sans CN;
    font-size: 12px;
    color: #989898;
  }
  .choice-item {
    width: 30%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .el-select {
      width: 250px;
    }
    .choice-title {
      font-size: 12px;
      width: 100px;
      text-align: center;
    }
    .rounded-input {
      width: 250px;
    }
  }
}
.flex-c {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}

.search {
  display: flex;
  justify-content: space-between;
  // margin-bottom: 10px;
  padding: 0 10px;
}
.search-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .btn {
    align-self: right;
  }
}
.mx-10 {
  margin: 0px 10px;
}
.mb-50 {
  margin-bottom: 50px;
}
.box-sb {
  display: flex;
  align-content: start;
  justify-content: space-between;
  position: relative;
}
.info {
  position: absolute;
  top: 38px;
  left: 78px;
  font-family: Source Han Sans CN;
  font-size: 12px;
  color: #989898;
}
.info1 {
  top: 27px;
  left: 3px;
}
</style>
